<template>
  <div class="box">
    <div class="content">
      <div class="content-title">{{ dormitoryName }} {{ roomName }}</div>
      <div class="student">
        <div class="student-avatar"> {{ startTime }} ~ {{ endTime }} </div>
        <ul class="student-info">
          <li v-for="(item, index) in allDeta.scoreBySuperiors" :key="index">
            <span class="title">{{ item.superiorName }}</span>
            <span class="text">{{ item.sumScore }}</span>
          </li>
          <li>
            <span class="title">合计：</span>
            <span :class="['text', 'red']">{{ allDeta.allSumScore }}</span>
          </li>
        </ul>
      </div>
      <div class="time-option">
        <div style="width: 300px; height: 400px; border: 1px solid #d9d9d9; border-radius: 4px">
          <Calendar
            v-model:value="dateTime"
            :fullscreen="false"
            :disabled-date="disabledDate"
            @change="onPanelChange"
            @panelChange="onPanelChange"
          >
            <template #headerRender="{ value: current, onChange }">
              <div style="padding: 10px">
                <div style="display: flex; align-items: center; justify-content: space-between">
                  <div style="display: flex">
                    <a-button
                      type="text"
                      size="small"
                      class="new-icon-arrow"
                      @click="
                        () => {
                          onChange(current.year(current.year() - 1));
                        }
                      "
                      ><DoubleLeftOutlined
                    /></a-button>
                    <a-button
                      type="text"
                      size="small"
                      class="new-icon-arrow"
                      @click="
                        () => {
                          onChange(current.month(parseInt(current.month() - 1, 10)));
                        }
                      "
                      ><LeftOutlined
                    /></a-button>
                  </div>
                  <div
                    style="
                      white-space: nowrap;
                      font-size: 16px;
                      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                      color: #222222;
                    "
                    >{{ `${current.year()}年${current.month() + 1}月` }}</div
                  >
                  <div style="display: flex">
                    <a-button
                      type="text"
                      size="small"
                      class="new-icon-arrow"
                      @click="
                        () => {
                          onChange(current.month(parseInt(current.month() + 1, 10)));
                        }
                      "
                      ><RightOutlined
                    /></a-button>
                    <a-button
                      type="text"
                      size="small"
                      class="new-icon-arrow"
                      @click="
                        () => {
                          onChange(current.year(current.year() + 1));
                        }
                      "
                      ><DoubleRightOutlined
                    /></a-button>
                  </div>
                </div>
              </div>
            </template>
          </Calendar>
        </div>
        <div class="time-option-content">
          <div
            v-for="(item, index) in allDetaInfoList.examineDetails"
            :key="index"
            class="time-option-info"
          >
            <div class="content-title">{{ item.superiorName }}</div>
            <ul>
              <li v-for="(it, i) in item.examineDetails" :key="i">
                <div>
                  <!-- <span v-if="it.examineType !== 3">{{ it.markItemName }}</span> -->
                  <!-- <span v-else>{{ it.examineGrade }}</span> -->
                  <p v-for="(ii, ind) of itemNameFun(it.markItemName)" :key="ind"
                    ><Tooltip
                      :overlay-style="{ whiteSpace: 'normal' }"
                      :get-popup-container="
                        triggerNode => {
                          return triggerNode.parentNode || document.body;
                        }
                      "
                      placement="topLeft"
                      :title="ii"
                      >{{ ii }}</Tooltip
                    ></p
                  >
                </div>
                <div class="red">
                  {{
                    it.examineGrade === '无'
                      ? it.totalMarkScore
                      : it.examineGrade + it.totalMarkScore
                  }}
                </div>
                <div>
                  <FieldTimeOutlined />
                  <span style="margin-left: 8px">{{ it.examineTime }}</span>
                </div>
              </li>
            </ul>
          </div>
          <!-- <div class="time-option-info">
            <div class="content-title">纪律扣分</div>
            <ul>
              <li v-for="item in 3" :key="item">
                <span>上课说话打闹打闹</span>
                <span class="red">-5</span>
                <span>
                  <FieldTimeOutlined />
                  <span style="margin-left: 8px">08:20</span>
                </span>
              </li>
            </ul>
          </div> -->
          <div class="total">
            <div>当日合计</div>
            <div class="total-num">{{ allDetaInfoList.totalFraction }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Calendar, Tooltip, message } from 'ant-design-vue';
import {
  DoubleLeftOutlined,
  LeftOutlined,
  RightOutlined,
  DoubleRightOutlined,
  FieldTimeOutlined
} from '@ant-design/icons-vue';
import {
  dormitoryCheckDetail,
  dormitoryCheckDetailCount
} from '@/api/assessment/dormitoryCollective';
import moment from 'moment';
import dayjs from 'dayjs';
onMounted(() => {
  dormitoryName.value = router.currentRoute.value.query.dormitoryName; // 宿舍楼
  roomName.value = router.currentRoute.value.query.roomName; // 房间名称
  startTime.value = router.currentRoute.value.query.examineStartTime;
  endTime.value = router.currentRoute.value.query.examineStopTime;
  console.log(router.currentRoute.value.query.roomId, 'router.currentRoute.value.query.roomId');
  // 获取当前时间
  let time = moment(router.currentRoute.value.query.examineStartTime).format('YYYY-MM-DD HH:mm:ss');
  let obj = {
    examineId: router.currentRoute.value.query.examineId,
    // currentTime: '2022-02-22',
    currentTime: time,
    roomId: router.currentRoute.value.query.roomId
    // roomId: 0
  };
  let objCount = {
    startTime: startTime.value,
    endTime: endTime.value,
    roomId: router.currentRoute.value.query.roomId
    // startTime: '2022-02-22 19:45:19',
    // endTime: '2022-02-24 19:45:19',
    // roomId: 0
  };
  allDetaInfo(obj);
  getAllDeta(objCount);
  let bodySty = document.getElementById('myApp');
  bodySty.setAttribute('class', 'bodyStyle');
});
function itemNameFun(it) {
  if (it) {
    return it.split(',');
  }
  return it;
}
let dormitoryName = ref(''); // 宿舍楼
let roomName = ref(''); // 房间名称
let startTime = ref(''); // 开始时间
let endTime = ref(''); // 结束时间
const allDetaInfoList = ref([]); // 扣分详情
const allDeta = ref([]); // 顶部详情
const router = useRouter();
function allDetaInfo(obj) {
  dormitoryCheckDetail(obj).then(res => {
    if (res.data.code === 200) {
      allDetaInfoList.value = res.data.data;
    }
  });
}
function getAllDeta(objCount) {
  dormitoryCheckDetailCount(objCount).then(res => {
    if (res.data.code === 200) {
      allDeta.value = res.data.data;
    }
  });
}
// 时间设置
const startT = moment(new Date(new Date(new Date().toLocaleDateString()).getTime())).format(
  'YYYY-MM-DD HH:mm:ss'
);
const endT = moment(
  new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
).format('YYYY-MM-DD HH:mm:ss');
// 时间限制
function disabledDate(current) {
  // if (startTime.value === startT && endTime.value === endT) {
  return (
    current < moment(router.currentRoute.value.query.examineStartTime) ||
    current > moment(router.currentRoute.value.query.examineStopTime)
  );
  // }
  // else {
  //   return (
  //     current < moment(router.currentRoute.value.query.examineStartTime) ||
  //     current > moment(router.currentRoute.value.query.examineStopTime).add(1, 'days')
  //   );
  // }
}
const dateTime = ref(dayjs(router.currentRoute.value.query.examineStartTime));
const onPanelChange = (value, mode) => {
  // let newS = moment(value.$d).format('YYYY-MM-DD') + ':00:00:00';
  // let newe = moment(value.$d).format('YYYY-MM-DD') + ':59:59:59';
  // let objCount = {
  //   startTime: newS,
  //   endTime: newe,
  //   roomId: router.currentRoute.value.query.roomId
  //   // startTime: '2022-02-22 19:45:19',
  //   // endTime: '2022-02-24 19:45:19',
  //   // roomId: 0
  // };
  let time = moment(value.$d).format('YYYY-MM-DD HH:mm:ss');
  let objCount = {
    examineId: router.currentRoute.value.query.examineId,
    currentTime: time,
    roomId: router.currentRoute.value.query.roomId
  };
  allDetaInfo(objCount);
};
</script>

<style lang="less" scoped>
.box {
  background: #f2f2f2;
  // padding: 50px 120px 24px;
  min-height: 100vh;
  .content {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px;
    &-title {
      font-size: 24px;
      font-family: Source Han Sans CN, Source Han Sans CN-Medium;
      font-weight: 500;
      color: #222222;
      margin-bottom: 16px;
    }
    .student {
      border: 1px solid #e4b778;
      border-radius: 4px;
      padding: 24px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      .student-avatar {
        font-size: 16px;
        color: #222222;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      }
      .student-info {
        display: flex;
        flex-wrap: wrap;
        padding: 0 24px;
        margin-bottom: 0;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        li {
          padding: 12px 0;
          font-size: 14px;
          margin-left: 30px;
          .title {
            color: #999999;
            display: inline-block;
            text-align: end;
          }
          .text {
            color: #222222;
            margin-left: 8px;
          }
          .red {
            color: #ff0000;
          }
        }
      }
    }
    .time-option {
      display: flex;
      &-content {
        flex: 1;
        background: #f8f8f8;
        border-radius: 4px;
        padding: 16px;
        margin-left: 24px;
        .time-option-info {
          .content-title {
            font-size: 16px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            color: #222222;
            margin-bottom: 16px;
          }
          ul {
            li {
              padding: 12px 16px;
              font-size: 14px;
              font-family: Source Han Sans CN, Source Han Sans CN-Regular;
              color: #666666;
              display: flex;
              align-items: center;
              // justify-content: space-between;
              background: #ffffff;
              border-radius: 4px;
              .red {
                color: #fe8f8f;
              }
              // p {
              //   width: 33.33%;
              // }
              div {
                flex: 1;
                p {
                  width: 400px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
              div:nth-child(2) {
                text-align: center;
              }
              div:last-child {
                text-align: end;
                justify-content: flex-end;
                align-items: center;
                display: flex;
              }
            }
            li + li {
              margin-top: 8px;
            }
          }
        }
        .total {
          padding: 12px 16px;
          font-size: 14px;
          font-family: Source Han Sans CN, Source Han Sans CN-Regular;
          color: #666666;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          background: #ffffff;
          border-radius: 4px;
          .total-num {
            color: #fe8f8f;
            margin-left: 90px;
          }
        }
      }
    }
  }
}
</style>
